<template>
  <d2-container class="page">
    <template slot="header">统计</template>
     <div class="statistical">
      <div :style="{background:bgcolor[index]}" class="son" v-for="(item,index) in statisticallist" :key="item.name">
        <p class="sonprice">￥{{item.price}}</p>
        <p class="sonname">{{item.name}}</p>
      </div>
    </div>
    <div class="statisnum statistical">
      <el-card class="elcard" shadow="hover" v-for="(item,index) in statisticallist" :key="item.name">
        <p class="titlestyle">
          <span>刷单数量</span>
          <span class="iconstyle" :style="{background:bgcolor[index]}">{{iconlist[index]}}</span>
        </p>
        <div class="center">
          <p class="price">{{item.num}}</p>
          <p>{{iconlist[index]}}单数</p>
        </div>
      </el-card>
    </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left:10px;">
      <el-form-item label="选择商户">
        <el-select size="small" v-model="shopVal" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择时间">
        <el-date-picker size="small" v-model="timelist" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="statistical" style="margin-bottom:20px;">
      <div style="overflow:hidden;" :style="{background:anothbgcolor[index]}" class="son" v-for="(item,index) in anothtype" :key="index">
        <div style="float:left;">
          <p class="sonprice">
            <img style="width:40px;" :src="item.path" alt="">
          </p>
          <p class="sonname">{{item.name}}</p>
        </div>
        <p style="float:right;font-size:20px;">￥{{item.price}}</p>
      </div>
    </div>
    <!-- <div class="showcircle">
      <div class="circle">
        <p class="first">{{titletext}}</p>
        <p class="second">{{total}} 元</p>
      </div>
      <ve-pie :data="chartData" :settings="chartSettings" style="width:50%;float:right;margin-top:15px;"></ve-pie>
    </div> -->
    <div style="margin-left:10px;">
      <h4>支付宝</h4>
      <el-table :data="zfbData" height="250" border style="width: 100%">
        <el-table-column prop="user" label="商户" width="280"></el-table-column>
        <el-table-column prop="transaction" label="订单号" ></el-table-column>
        <el-table-column prop="payment_amount" label="充值金额" width="280"></el-table-column>
      </el-table>
      <el-pagination @current-change="handleCurrentChange" :current-page.sync="pagezfb"
        :page-size="10" layout="total, prev, pager, next" :total="totalzfb" v-if="totalzfb>=10">
      </el-pagination>
      <h4>银行卡</h4>
      <el-table :data="yhkData" height="250" border style="width: 100%">
        <el-table-column prop="user" label="商户" width="280"></el-table-column>
        <el-table-column prop="bankcard_number" label="订单号"></el-table-column>
        <el-table-column prop="bankcard_money" label="充值金额" width="260"></el-table-column>
        <el-table-column prop="addpeople" label="审核人" width="200"></el-table-column>
      </el-table>
      <el-pagination @current-change="handlepageChange" :current-page.sync="pageyhk"
        :page-size="10" layout="total, prev, pager, next" :total="totalyhk" v-if="totalyhk>=10">
      </el-pagination>
    </div>
  </d2-container>
</template>

<script>
import { ctconsumption,bancktopup,alitopup,alitopuplist,bancktopuplist,income,ordernum } from '@api/api';
export default {
  data () {
    // this.chartSettings = {
    //   roseType: 'radius'
    // }
    return {
      statisticallist:[
        {price:'0.00',name:'总收入',num:0},
        {price:'0.00',name:'年收入',num:0},
        {price:'0.00',name:'月收入',num:0},
        {price:'0.00',name:'日收入',num:0}
      ],
      bgcolor:['#e4cc60','#0494ae','#f88109','#f83215'],
      anothbgcolor:['#23c6c8','#f8ac59'],
      anothtype:[
        {price:'0.00',name:'支付宝',path:require('../../../assets/img/zfb.png')},
        {price:'0.00',name:'银行卡',path:require('../../../assets/img/yhk.png')}
      ],
      iconlist:['总','年','月','日'],
      // chartData: {
      //   columns: ['日期', '访问用户'],
      //   rows: [
      //     { '日期': '1/5', '访问用户': 2923 },
      //     { '日期': '1/6', '访问用户': 4593 }
      //   ]
      // },
      zfbData:[],
      yhkData:[],
      formInline: {
        user: '',
        region: ''
      },
      options: [],
      shopVal:'',
      timelist:[],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // titletext:'今日商户充值总额',
      // total:20000,
      pagezfb:1,
      totalzfb:0,
      pageyhk:1,
      totalyhk:0,
    }
  },
  created(){

  },
  mounted(){
    this.getshoplist()
    this.getyhk()
    this.getzfb()
    let params = {
          page:1,
          pageSize:10
        }
    this.getzfblist(params)
    this.getyhklist(params)
    this.getallmoney()
    this.getallnum()
  },
  methods:{
    //获取商户列表
    getshoplist(){
      ctconsumption().then(res=>{
        if(res.status == 200){
          this.options = []
          let tempdata = res.data
          for(let item in tempdata){
            this.options.push({
              value:tempdata[item].id,
              label:tempdata[item].user
            })
          }
        }
      })
    },
    //获取年月日收入
    getallmoney(){
      let arr = ['Count','Year','Month','Day']
      arr.forEach((item,idx) => {
        income({type:item}).then(res=>{
          // console.log('获取年月日收入',res)
          if(res.status == 200){
            this.statisticallist[idx].price = res.lr_num
          }
        })
      })
    },
    //获取年月日数量
    getallnum(){
      let arr = ['Count','Year','Month','Day']
      arr.forEach((item,idx) => {
        ordernum({type:item}).then(res=>{
          // console.log('获取年月日数量',res)
          if(res.status == 200){
            this.statisticallist[idx].num = res.count
          }
        })
      })
    },
    //获取银行卡总金额
    getyhk(params){
      bancktopup(params).then(res=>{
        console.log('银行卡',res)
        this.anothtype[1].price = res.date
      })
    },
    //获取支付宝总金额
    getzfb(params){
      alitopup(params).then(res=>{
        this.anothtype[0].price = res.date
      })
    },
    //获取支付宝列表
    getzfblist(params){
      alitopuplist(params).then(res=>{
        if(res.status == 200){
          this.totalzfb = res.count
          this.zfbData = res.list
          // console.log('银行卡列表',this.zfbData)
        }
      })
    },
    //获取银行卡列表
    getyhklist(params){
      bancktopuplist(params).then(res=>{
        if(res.status == 200){
          this.totalyhk = res.count
          this.yhkData = res.list
          // console.log('银行卡列表',this.yhkData)
        }
      })
    },
    //支付宝分页
    handleCurrentChange(val) {
      this.pagezfb = val
      let item = {
            page:val,
            pageSize:10,
            date:this.timelist,
            cooperation_id:this.shopVal
          }
      this.getzfblist(item)
    },
    //银行卡分页
    handlepageChange(val){
      this.pageyhk = val
      let item = {
            page:val,
            pageSize:10,
            date:this.timelist,
            cooperation_id:this.shopVal
          }
      this.getyhklist(item)
    },
    //查询
    onSubmit() {
      if(this.timelist.length>0){
        this.timelist[0] = this.timelist[0]+' 00:00:00'
        this.timelist[1] = this.timelist[1]+' 23:59:59'
      }
      let params = {
        date:this.timelist,
        cooperation_id:this.shopVal
      }
      this.getyhk(params)
      this.getzfb(params)
      let item = {
            page:1,
            pageSize:10,
            date:this.timelist,
            cooperation_id:this.shopVal
          }
      this.getzfblist(item)
      this.getyhklist(item)
    },
  }
}
</script>

<style lang="scss" scoped>
.page {
  h4{
    font-weight: 100;
  }
  .circle{
    width: 260px;
    height: 260px;
    border-radius: 50%;
    margin:20px auto;
    background: linear-gradient(to right,#01ccfb, #337eec);
    color:#fff;
    text-align: center;
    font-size: 20px;
  }
  .first{
    padding-top:80px;
    margin-bottom: 0;
  }
  .second{
    margin-top: 10px;
    font-size:30px;
  }
  .statistical{
    display: flex;
    justify-content: space-around;
    .son{
      margin:10px;
      width:100%;
      padding:10px 20px;
      border-radius: 6px;
      color:#fff;
      .sonprice{
        font-size:20px;
        margin:10px 0;
      }
      .sonname{
        margin-top:0;
      }
    }
  }
  .statisnum{
    margin-bottom:20px;
    .elcard{
      font-size:14px;
      width:100%;
      margin:10px;
      .titlestyle{
        margin:0;
        display: flex;
        justify-content: space-between;
        .iconstyle{
          display: inline-block;
          padding: 2px 10px;
          font-weight: 600;
          color:#fff;
          border-radius: 3px;
        }
      }
      .center{
        p{
          margin:0;
        }
        .price{
          font-size:30px;
          margin:15px 0 5px;
        }
      }
    }
  }
}
</style>
